<template>
  <!-- banner   START -->
  <div class="container-fluild">
    <div class="row long-row">
      <img class="minImg" src="./images/minslide-product.jpg" alt="product" />
      <img class="maxImg" src="./images/slide-product.jpg" alt="product" />
    </div>
  </div>
  <!-- banner   END -->
  <router-view></router-view>
</template>

<script>

  export default {
    name: "Product",
  };
</script>

<style scoped>
  /* banner  START */
  .container-fluild .long-row .maxImg {
    width: 100%;
  }

  .container-fluild .long-row .minImg {
    width: 100%;
  }

  /* banner  END */

  /* 设置响应式 */
  /* 移动端 */
  @media (max-width: 768px) {
    .container-fluild .long-row .maxImg {
      display: none;
    }

    .productListBackground {
      height: 2420px;
    }
  }

  /* PC端 */
  @media (min-width: 768px) {
    .container-fluild .long-row .minImg {
      display: none;
    }
  }
</style>